<template>
  <div>
    <div ref="task-edit-header">
      <Headline :go-back="goBack" name="任务编辑"/>
    </div>
    <div style="padding-top: 0px">
      <el-row ref="task-edit-row-1">
        <el-col :span="2">
          <span class="label">任务名称<em style="color: red">*</em></span>
        </el-col>
        <el-col :span="4">
          <el-input maxlength="50" show-word-limit
                    v-model="task.name"/>
        </el-col>
        <el-col :span="2">
          <span class="label">支持自建<em style="color: red">*</em></span>
        </el-col>
        <el-col :span="4">
          <el-switch :active-value="1"
                     :inactive-value="0"
                     v-model="task.enableCreate"/>
        </el-col>
        <el-col :span="2">
          <span class="label">审核级别<em style="color: red">*</em></span>
        </el-col>
        <el-col :span="4">
          <el-radio-group v-model="task.auditLevel">
            <el-radio :label="1" :disabled="auditLevel_bak > 1">初审</el-radio>
            <el-radio :label="2" :disabled="auditLevel_bak > 2">复审</el-radio>
            <el-radio :label="3" :disabled="auditLevel_bak > 3">终审</el-radio>
          </el-radio-group>
        </el-col>

        <el-col :span="2">
          <span class="label">所属知识库<em style="color: red">*</em></span>
        </el-col>
        <el-col :span="4">
          <el-select v-model="task.knowledgeLibId" placeholder="请选择" disabled>
            <el-option
              v-for="item in knowledgeLibList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

      <el-row ref="task-edit-row-2">
        <el-col :span="2">
          <span class="label">备注信息</span>
        </el-col>
        <el-col :span="4">
          <el-input maxlength="100" show-word-limit
                    v-model="task.remark"/>
        </el-col>

        <el-col :span="2">
          <span class="label">开始时间<em style="color: red">*</em></span>
        </el-col>
        <el-col :span="4">
          <el-date-picker
            v-model="task.startDate"
            :clearable="false"
            :editable="false" placeholder="开始日期"
            value-format="yyyy-MM-dd"
            type="date">
          </el-date-picker>
        </el-col>

        <el-col :span="2">
          <span class="label">结束时间<em style="color: red">*</em></span>
        </el-col>
        <el-col :span="4">
          <el-date-picker
            v-model="task.endDate"
            :clearable="false"
            :editable="false"
            placeholder="结束日期"
            type="date"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-col>

        <el-col :span="2" :offset="4">
          <el-button type="primary" @click="updateTask">更新项目</el-button>
        </el-col>
      </el-row>

      <el-tabs active-name="TaskItemTable">
        <el-tab-pane label="任务列表" name="TaskItemTable">
          <TaskItemList :auditLevel_bak="auditLevel_bak"
                        :knowledge-lib-id="task.knowledgeLibId"
                        :task-id="task.id"
                        :task-item-list="task.taskItemList"
                        :height="taskItemListHeight"
                        :systemType="task.systemType"/>
        </el-tab-pane>
        <el-tab-pane label="附件记录" name="TaskFileTable">
          <TaskFileTable :task="task"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Headline from "../knowledge/knowledgeEdit/Headline";
import TaskFileTable from "./TaskFileTable";
import TaskItemList from "./TaskItemList";
import {mapState} from "vuex";

export default {
  name: "TaskEdit",
  components: {
    TaskItemList,
    Headline,
    TaskFileTable,

  },
  data() {
    return {
      dateRange: [],
      auditLevel_bak: 1,
      task: {
        id: '',
        status: 1,
        name: '',
        auditLevel: 1,
        enableCreate: false,
        knowledgeLibId: '0001AA1000000009KH8H',
        startDate: '',
        endDate: '',
        remark: '',
        taskItemList: [],
        taskFileList: []
      },
      taskItemListHeight: 0
    }
  },
  computed: {
    ...mapState(['knowledgeLibList']),
  },
  methods: {
    updateTask() {
      if (!this.task.name) {
        this.$message.warning("任务名称不能为空")
        return
      }
      this.axios.post('/pmph/action/task/updateTaskById', this.task)
        .then((response) => {
          this.auditLevel_bak = this.task.auditLevel
          this.task.taskItemList = response.data
        })
    },
    goBack() {
      this.$router.back()
    },
  },
  created() {
    this.axios.get('/pmph/action/task/selectTaskById', {
      params: {
        taskId: this.$route.query.taskId
      }
    }).then((response) => {
      this.task = response.data;
      this.dateRange = [this.task.startDate, this.task.endDate]
      this.auditLevel_bak = this.task.auditLevel
    })
    this.$nextTick(() => {
      let headerHeight = this.$refs["task-edit-header"].clientHeight
      let row1Height = this.$refs["task-edit-row-1"].$el.clientHeight
      let row2Height = this.$refs["task-edit-row-2"].$el.clientHeight
      this.taskItemListHeight = CONST.WORKSPACE_HEIGHT - headerHeight - row1Height - row2Height
    })
  }
}
</script>

<style scoped>
.el-row {
  line-height: 50px;
}

.el-col {
  display: inline-block;
}

.label {
  float: right;
  margin-right: 10px;
}
</style>
